<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* color以用英语单词、十六进制、rgb()、rgba()等表示法
        通常为十六进制表示-- */
      #div1 {
        color: red;
      }

      #div2 {
        color: #ddd;
      }

      #div3 {
        color: rgb(40, 40, 189);
      }

      /* 最后一个参数表示颜色透明度介于 0 到 1 之间 */
      #div4 {
        color: rgba(40, 40, 189, 0.5);
      }

      #div5 {
        font-size: 30px;
        font-weight: bold;
        font-style: italic;
      }

      /* 百分比相对于父元素的 font-size 大小而言 */
      #div5 span {
        font-size: 50%;
        font-weight: normal;
        font-style: oblique;
      }
    </style>
  </head>
  <body>
    <div style="height: 100px; width: 200px" id="div1">颜色</div>
    <div style="height: 100px; width: 200px" id="div2">颜色</div>
    <div style="height: 100px; width: 200px" id="div3">颜色</div>
    <div style="height: 100px; width: 200px" id="div4">颜色</div>

    <div style="height: 100px; width: 200px" id="div5">
      字体大小
      <span>50%字体</span>
    </div>
  </body>
</html>
